<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8">
	<title>moonJs demo</title>
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
	<style>
		html,
		body,
		p,
		div {
			margin: 0;
			padding: 0;
		}
	</style>
</head>

<body>
	<script src='../libs/easeljs.js'></script>
	<script src='../libs/Unify.js'></script>
	<script src="../libs/createui.js"></script>
	<script src="../libs/createSprite.js"></script>
	<script src="../libs/createEvent.js"></script>
	<canvas id='canvas' width=1000 height=600></canvas>
	<script>
		mColor.colorNormal = '#224511';
		mColor.colorOver = '#006660';
		mColor.colorDown = '#0037AE';
		mColor.colorFont='#dddddd';
		mColor.colorBack='#004500';
	    mColor.colorFront='#57FF60';
		uiconfig.roundAngle = 10;
		
		var canvas=document.getElementById('canvas');
		var stage = createui.initStage(canvas);
		var sceneLayer = new MScene({});
		stage.addChild(sceneLayer);

		var scenes = [];
		var tabbar = new MTabbar();
		stage.addChild(tabbar);
		tabbar.setPos(5, 5);
		tabbar.setCallBack((id) => { sceneLayer.removeAllChildren();sceneLayer.addChild(scenes[id]); })
		for (let i = 0; i < 5; i++) {
			tabbar.addItem(new MButton({ label: '场景' + parseInt(i + 1) }));
			let scene = new MScene({});
			scenes.push(scene);
		}
		tabbar.select(0);
		tabbar.displayRank(tabbar.getItems(), 1, 5, 5);
//----------0-------------
		var scene = scenes[0];
		var shape=new MClock();
		shape.setPos(300,300)
		scene.addChild(shape);
		//MTween.set(shape).go(1000,{x:500}).go(2000,{x:300}).start();

		shape=new MBasicSprite();
		shape.setPos(300,300)
		scene.addChild(shape);
		shape.drawCircleText(['一','二','三','四','五','六','七','八','九','十','十一','十二'],120);
		shape.drawCircleText(['one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve'],160);

		shape=new MShape();
		shape.setPos(50,50);
		shape.drLine(50,50,3,'white');
		scene.addChild(shape);

		shape=new MSprite();
		shape.setPos(400,60);
		shape.dc(30);
		scene.addChild(shape);

		let mask=new MShape();
		mask.dt(50,25,30);
		mask.x=shape.x;mask.y=shape.y-30;
		shape.mask=mask;

		shape=new MCar();
		shape.setPos(600,200);
		scene.addChild(shape);
		// shape.wheels.forEach(wheel => {
		// 	wheel.rotation=30;
		// 	MTween.set(wheel).go(1000,{rotation:-30}).go(1000,{rotation:30}).start(true);
		// })
		// shape.scale=1.3;
		//MTween.set(shape).go(2000,{y:100}).go(2000,{rotation:180}).go(2000,{y:400}).go(2000,{rotation:0}).start(true);

		shape=new MCar('green',120,50,'yellow');
		shape.setPos(700,200);
		shape.car.y=0;
		scene.addChild(shape);

		shape=new MEmoji();
		shape.drawCar(9);
		shape.setPos(700,500);
		scene.addChild(shape);

		shape=new MBasicSprite();
		scene.addChild(shape);
		shape.setPos(50,500);
		shape.drawLoveSar(20);

		for(let i=0;i<2;i++){
			shape=new MSprite();
			scene.addChild(shape);
			shape.setPos(100+i*110,500);
			shape.drr(80,80,10,'white',{s:2,c:'black'});
			let a=new MEmoji();
            a.drawAnimal(-1);
            a.setScale(2.6)
            a.setAnchor(0);
            a.x=11;
			//MTween.set(a).go(1000,{scale:3}).go(1000,{scale:1}).start(true);
            shape.addChild(a);
		}
//----------1-------------
		var scene = scenes[1];
		shape=new MBasicSprite;
		scene.addChild(shape);
		shape.setPos(250,250);
		for(var i=0;i<20;i++){
			shape.addChild(new MSprite().dc(3));
		}
		shape.layoutRect(shape.children);

		shape=new MBasicSprite;
		scene.addChild(shape);
		shape.setPos(100,100);
		shape.drawConcCircle(['#ff9999','red','#ff9999','red'])

		shape=new MBasicSprite;
		scene.addChild(shape);
		shape.setPos(300,100);
		shape.drawConcCircle(['#ff9999','red','#ff9999','red'],60,60);

		shape=new MEmoji();
		scene.addChild(shape);
		shape.setPos(50,550)
		shape.drawEmoji('🚩');
		
		shape=new MSprite();
		scene.addChild(shape);
		shape.setPos(40,580)
		shape.dr(500,7,'#666666');

		shape=new MEmoji();
		scene.addChild(shape);
		shape.setPos(500,550)
		shape.drawEmoji('🚴🏼');
		MTween.set(shape).go(1000).go(50000,{x:50}).start();

		shape=new MEmoji();
		scene.addChild(shape);
		shape.setPos(50,400);
		shape.drawDice(0,4);
		shape.color='red';
		shape.addEvent('click',(e)=>{
			let t=e.currentTarget;
			MTween.set(e.currentTarget,'to',()=>{t.drawDice(Math.floor(Math.random()*6),4)}).go(200,{y:300}).go(100,{y:400}).start();
		})
//----------2-------------
		var scene = scenes[2];
		for(let i=0;i<6;i++){
			shape=new MFruits();
			scene.addChild(shape);
			shape.setPos(100+i*100,100);
			if(i==0)		shape.drawWatermelon();
			else if(i==1)	shape.drawOrange();
			else if(i==2)	shape.drawKiwiFruit();
			else if(i==3)	shape.drawPassionFruit();
			else if(i==4)	shape.drawMangosteen();
			else if(i==5)	shape.drawPitaya();
		}
//----------3-------------
		var scene = scenes[3];
		let draws=['drawFruits','drawTreeFlower','drawCar','drawAnimal','drawBall','drawFace','drawLoveStar','drawControl','drawCard','drawPenBook'];
		for(let j=0;j<draws.length;j++){
			let shapes=[];
			for(let i=0;i<20;i++){
				let shape=new MEmoji();
				shape[draws[j]](i,2);
				scene.addChild(shape);
				shape.color='red';
				shapes.push(shape);
			}
			Unify.displayRank(shapes,20,0,0,110,50+50*j);
		}
//----------3-------------
		var scene = scenes[4];
		shape=new MBasicSprite();
		shape.drawBagBox({w:80,h:80});
		scene.addChild(shape);
		shape.setPos(200,100);

		shape=new MEmoji();
		shape.drawClock(0);
		scene.addChild(shape);
		shape.setPos(300,100);
		shape.i=0;
		shape.time=(shape)=>{
			setTimeout(()=>{
				shape.drawClock(shape.i++);
				shape.time(shape);
				if(shape.i==12)shape.i=0;
			},500);
		}
		shape.time(shape);
		
		shape=new MShape();
		shape.drr(60,60,8,'red',{s:2,c:'black'})
		scene.addChild(shape);
		shape.setPos(200,200);

		shape=new MEmoji();
		scene.addChild(shape);
		shape.setPos(500,400)
		shape.drawEmoji('👩‍👩‍👧‍👧🧑🏻‍🤝‍🧑🏾⛷️🖼️♀️',3);
		
	</script>
</body>
</html>